<template>
  <div class="shipTypes">
    <div id="shipTypesCount"></div>
  </div>
</template>
<script>
import Right from "@/views/Right.vue";
import { getShipTypeStatistics } from "../../api/newEnergyShip";
import Left from "@/views/Left.vue";
export default {
  name: "shipTypes",
  data() {
    return {
      shipTypes: [
        // "公务船",
        // "游船",
        // "渡船",
        // "其他客运船",
        // "集装箱船",
        // "其他货运船",
      ],
      shipSeries: [
        // {
        //   value: 0,
        //   barWidth: "10",
        //   itemStyle: {
        //     color: "#20e326",
        //   },
        // },
        // {
        //   value: 2,
        //   barWidth: "10",
        //   itemStyle: {
        //     color: "#20e326",
        //   },
        // },
        // {
        //   value: 41,
        //   barWidth: "10",
        //   itemStyle: {
        //     color: "#20e326",
        //   },
        // },
        // {
        //   value: 3,
        //   barWidth: "10",
        //   itemStyle: {
        //     color: "#20e326",
        //   },
        // },
        // {
        //   value: 0,
        //   barWidth: "10",
        //   itemStyle: {
        //     color: "#20e326",
        //   },
        // },
        // {
        //   value: 0,
        //   barWidth: "10",
        //   itemStyle: {
        //     color: "#20e326",
        //   },
        // },
      ],
    };
  },
  methods: {
    initChart() {
      const myChart = this.$echarts.init(
        document.getElementById("shipTypesCount")
      );

      const option = {
        xAxis: {
          type: "category",
          data: this.shipTypes,
          axisTick: {
            alignWithLabel: true,
          },
          axisLabel: {
            color: "#E4E4E4",
            interval: -30,
          },
          splitLine: {
            show: false,
          },
          boundaryGap: true,
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
          axisLabel: {
            color: "#E4E4E4",
          },
        },
        grid: {
          left: 30, // 增加左边距
          right: 30, // 增加右边距
          top: 10,
          bottom: 20,
        },
        series: [
          {
            data: this.shipSeries,
            barWidth: "10",
            type: "bar",
          },
        ],
      };

      myChart.setOption(option);
    },
    generateRandomColor() {
      return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
    },

    getData() {
      getShipTypeStatistics()
        .then((res) => {
          if (res != null && res.length > 0) {
            this.shipTypes = res.map((item) => item.shipTypeName);
            this.shipSeries = res.map((item, index) => {
              let d = [];
              return {
                value: item.shipCount,
                itemStyle: {
                  color: this.generateRandomColor(),
                },
              };
              // for (let i = 0; i < index; i++) {
              //   d.push(0);
              // }
              // d.push(item.shipCount);
              // return {
              //   name: item.shipTypeName,
              //   data: d,
              //   type: "bar",
              //   barWidth: "10",
              //   stack: "stack1", // 使用 stack 属性
              //   itemStyle: {
              //     color: this.generateRandomColor(),
              //   },
              // };
            });

            this.initChart();
          }
        })
        .catch((err) => {});
    },
  },
  mounted() {
    this.getData();
    this.initChart();
  },
};
</script>
<style lang="scss" scoped>
.shipTypes {
  width: 100%;
  height: calc(100% - 150px);
  background: #0e2551;
  border-radius: 6px;
  #shipTypesCount {
    width: 100%;
    height: 100%;
  }
}
</style>
